<template>
    <div class="box">
        <div class="header">
            <van-nav-bar left-arrow title="登录" @click-left="this.$router.back()" right-text="注册" @click-right="onClickRight"></van-nav-bar>
        </div>
        <div class="content">
            <van-field v-model="loginname" placeholder="手机号/账号/邮箱"/>
            <van-field v-model="password" type="password" placeholder="请输入密码"/>
            <van-button class="login_button" :disabled="flag" round type="danger" size="large" @click="login">登录</van-button>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Field, Button, Dialog, Toast } from 'vant'
import { mapActions } from 'vuex'

Vue.use(NavBar)
Vue.use(Field)
Vue.use(Button)
Vue.use(Dialog)
Vue.use(Toast)
export default {
  computed: {
    flag () {
      return this.loginname === '' || this.password === ''
    }
  },
  data () {
    return {
      loginname: '',
      password: ''
    }
  },
  methods: {
    ...mapActions({
      loginAction: 'user/loginAction' // 分模块的关键
    }),
    login () {
      this.loginAction({
        loginname: this.loginname,
        password: this.password
      })
    },
    onClickRight () {
      this.$router.push({ path: '/register' })
    }
  }
}
</script>

<style lang="stylus">
.login_button
    font-size: 14px
    cursor: not-allowed
    color: #fff
</style>
